<template>
  <div class="wrap">
    <div class="header">

      <!-- 头部搜索栏 -->

      <el-input ref="search" placeholder="请输入公告标题" v-model="input" :disabled="false"></el-input>
      <el-button type="primary" plain>搜索</el-button>
      <el-button type="primary" plain @click="clearSearch()">重置</el-button>
      <el-button type="success" plain @click="centerDialogVisible = true">添加公告</el-button>
    </div>
    <div class="main">

      <!-- 添加公告 -->

      <el-dialog title="添加公告" :visible.sync="centerDialogVisible" width="30%" center>
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="公告标题" prop="title">
            <el-input v-model="ruleForm.title" placeholder="请输入公告标题"></el-input>
          </el-form-item>
          <el-form-item label="公告内容" prop="content">
            <el-input v-model="ruleForm.content" placeholder="请输入公告内容"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm('ruleForm'),addNotice()">确 定</el-button>
        </span>
      </el-dialog>

      <el-dialog title="修改公告" :visible.sync="centerDialogVisible2" width="30%" center>
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="公告编号" prop="id">
            <el-input disabled v-model="ruleForm.id"></el-input>
          </el-form-item>
          <el-form-item label="公告标题" prop="title">
            <el-input v-model="ruleForm.title"></el-input>
          </el-form-item>
          <el-form-item label="公告内容">
            <el-input type="textarea" v-model="ruleForm.content"></el-input>
          </el-form-item>
          <el-form-item label="发布时间" prop="pubTime">
            <el-input disabled v-model="ruleForm.pubTime" placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item label="发布人" prop="manId">
            <el-input disabled v-model.number="ruleForm.manId" placeholder="请输入账号"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible2 = false">取 消</el-button>
          <el-button type="primary" @click="submitForm2('ruleForm'),editNotice()">确 定</el-button>
        </span>
      </el-dialog>

      <!--公告表格主体  -->

      <template>
        <el-table v-loading="loading" :data="noticeData" border style="width: 100%"
          current-change="handleCurrentChange">
          <el-table-column label="编号" prop="id" width="100">
          </el-table-column>
          <el-table-column prop="title" label="公告标题">
          </el-table-column>
          <el-table-column prop="title" label="公告内容">
          </el-table-column>
          <el-table-column prop="pubTime" label="发布时间">
          </el-table-column>
          <el-table-column prop="manId" label="发布人">
            <!-- <p v-if="scope.row.manId==0"></p> -->
          </el-table-column>
          <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
              <el-button @click="changeNotice(scope.$index, scope.row)" type="text" size="small">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>

    <!-- 分页组件 -->

    <div id="pages">
      <el-pagination @current-change="handleCurrentChange" @size-change="handlePageSize" background
        :current-page="currentPage" layout="prev, pager, next" :total="total" :page-size="pagesize">
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  props: ['search'],
  data () {
    var checkName = (rule, value, callback) => {
      if (/^[\u4e00-\u9fa5]+$/.test(value) == false) {
        callback(new Error('请输入中文'));
      } else {
        callback();
      }
    };
    return {
      input: '',
      total: 20,                      //数据总条数
      pagesize: 5,                    //一页显示几条
      currentPage: 1,                 //当前页
      centerDialogVisible: false,     //添加公告弹框
      centerDialogVisible2: false,    //修改公告弹框
      loading: true,
      // 公告数据
      noticeData: [{
        id: '',
        title: '',
        content: '',
        pubTime: '',
        manId: '',
        powId: ''
      },
      {
        id: '1',
        title: '公告一',
        content: '117水管',
        pubTime: '2021年11月10日',
        manId: '2',
        powId: '2'
      },
      {
        id: '2',
        title: '公告二',
        content: '114修小王',
        pubTime: '2021年11月10日',
        manId: '2',
        powId: '2'
      }
      ],
      ruleForm: {
        id: '',
        title: '',
        content: '',
        pubTime: '',
        manId: '',
        powId: '',
        username: 'admin'
      },
      rules: {
        title: [
          { validator: checkName, trigger: 'blur' },
          { required: true, message: '请输入公告标题', trigger: 'blur' },
          { min: 2, max: 12, message: '长度必须在6-12位', trigger: 'blur' }
        ],
        content: [
          { validator: checkName, trigger: 'blur' },
          { required: true, message: '请输入公告内容', trigger: 'blur' },
        ],
      },
    }
  },
  created () {
  },
  methods: {

    // 对话框（修改，添加）
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    },

    handleCurrentChange (val) {
      this.currentRow = val;
    },
    handleClick (row) {
      console.log(row);
    },
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // this.$message.success('添加成功！');
          return this.centerDialogVisible = false
        } else {
          return false;
        }
      });
    },
    submitForm2 (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // this.$message.success('添加成功！');
          return this.centerDialogVisible2 = false
        } else {
          return false;
        }
      });
    },
    headerStyle ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 15) {
        return 'table-th'
      } else if (columnIndex === 0 || columnIndex === 1) {
        return 'table-lt'
      } else {
        return 'table-rt'
      }
    },
    isCenter ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 15) {
        return 'text-align: center'
      } else if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2 || columnIndex === 3 || columnIndex === 4) {
        return 'text-align: left'
      } else {
        return 'text-align: right'
      }
    },

    // 重置按钮
    clearSearch (row, column) {
      this.$refs.search.value = '';
    },

    // 搜索公告




    // 获取公告

    checkNotice () {
      // this.$axios.defaults.headers.token = localStorage.getItem('token');
      this.$axios.get('/allNotice', {
        params: {
          rows: this.pagesize,
          page: this.currentPage
        },
      }).then(res => {
        console.log(res);
        this.noticeData = res.data.data.allNotice;
        if (res.data.code == 200) {
          this.loading = false
          // this.$message('查询成功')
          // console.log()
        } else {
          this.$message('查询失败')
          console.log(this.time)
        }
      })
    },



    // 分页组件
    handleCurrentChange (val) {
      this.currentPage = val
      this.loading = true;
      // console.log('当前页:');
      // console.log(this.currentPage);
      this.checkNotice();

    },
    handlePageSize (val) {
      this.currentPage = val
      // console.log('条数:');
      // console.log(val);
      // console.log(this.currentPage);
    },




    // 通过公告标题查询公告
    checkNo_tit () {
      var params = new URLSearchParams()
      params.append('content', this.ruleForm.content)
      this.$axios.post('/addNotice', params).then(res => {
        if (res.data.code == 200) {
          console.log(res);
          this.$message.success('添加公告成功！')
        } else {
          this.$message.error('添加公告失败！')
          console.log(res);
          console.log(this.ruleForm.title)
          console.log(this.ruleForm.content)
        }
      })
    },



    // 发布公告





    // 添加公告
    addNotice () {
      var params = new URLSearchParams()
      params.append('content', this.ruleForm.content)
      params.append('titleName', this.ruleForm.title)
      params.append('username', this.ruleForm.username)
      this.$axios.post('/addNotice', params).then(res => {
        if (res.data.code == 200) {
          console.log(res);
          this.$message.success('添加公告成功！')
        } else {
          this.$message.error('添加公告失败！')
          console.log(res);
          console.log(this.ruleForm.title)
          console.log(this.ruleForm.content)
        }
      })
    },




    // 编辑公告
    changeNotice (index, row) {
      this.centerDialogVisible2 = true;
      this.ruleForm.id = row.id;
      this.ruleForm.title = row.title;
      this.ruleForm.content = row.content;
      this.ruleForm.pubTime = row.pubTime;
      this.ruleForm.manId = row.manId;
      console.log(index, row)
    },
    editNotice () {
      var params = new URLSearchParams()
      params.append('content', this.ruleForm.content)
      params.append('titleName', this.ruleForm.title)
      params.append('id', this.ruleForm.id)
      this.$axios.post('/changeNotice', params).then(res => {
        if (res.data.code == 200) {
          console.log(res);
          this.$message.success('修改公告成功！')
          this.checkNotice();
        } else {
          this.$message.error('修改公告失败！')
          console.log(res);
        }
      })
    },


    // 查看公告


  },
  mounted () {
    this.checkNotice();
  },
}
</script>
<style scoped>
.wrap {
  margin-top: 30px !important;
  border-top: 1px solid #fff;
}
.wrap .el-input {
  width: 400px;
}
::v-deep .el-input input {
  padding-left: 20px !important;
}
.wrap .el-button {
  width: 100px;
  height: 40px;
  line-height: 40px;
}
::v-deep .el-table {
  margin-top: 50px !important;
}
::v-deep .el-table th {
  border-color: #bbb;
}
::v-deep .el-table tr th,
::v-deep .el-table tr td {
  text-align: center;
}
::v-deep .el-table tr th {
  height: 50px;
  background: #eee;
}
::v-deep .el-dialog {
  margin: auto auto !important;
  padding-left: 30px !important;
  width: 800px;
  height: 400px;
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  overflow: hidden;
}
::v-deep .el-dialog:nth-child(1) {
  height: 560px;
}

::v-deep .el-dialog .el-dialog__header {
  margin-top: 30px !important;
}
::v-deep .el-dialog .el-form-item {
  margin-top: 30px !important;
}
::v-deep .el-dialog .el-dialog__footer {
  margin-top: 70px !important;
}
::v-deep .el-dialog .el-dialog__footer .el-button:nth-child(1) {
  margin-right: 100px !important;
}
::v-deep .el-dialog .el-form-item .el-form-item__content .el-form-item__error {
  margin-left: 100px !important;
  margin-top: 5px !important;
}
::v-deep .el-dialog .el-form-item .el-form-item__content .el-input {
  margin-left: 10px !important;
}
::v-deep .el-dialog .el-form-item .el-form-item__content .el-textarea {
  width: 400px;
  margin-left: 10px !important;
}
::v-deep .el-dialog .el-form-item .el-form-item__content .el-textarea textarea {
  padding: 10px !important;
  padding-left: 20px !important;
}
#pages {
  margin-right: 10px !important;
  margin-top: 50px !important;
  float: right;
}
</style>